import React, { useState, useEffect } from 'react';
import {
  UploadOutlined, UserOutlined, VideoCameraOutlined,
  MailOutlined, SettingOutlined, AppstoreOutlined
} from '@ant-design/icons';
import { Layout, Menu, } from 'antd';
import './App.css'
const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}




const App = () => {
  const [val, setVal] = useState();
  const [current, setCurrent] = useState('1');
  const [key, setKey] = useState();
  const [subkey, setsubKey] = useState();
  const [one, setone] = useState('菜单项1.1')
  const [two, settwo] = useState('菜单项1.2')
  const [three, setthree] = useState('菜单项1.3')
  const [four, setfour] = useState('菜单项1.4')
  const [arr, setarr] = useState([])
  const onClick = (e) => {
    console.log('click ', e);
    setKey(e.key)
    setVal(e.domEvent.target.outerText)
    setCurrent(e.key);
    setsubKey(e.keyPath[1])
    setarr(e)
  };
  const handclick = () => {
    if (arr.keyPath[0] == 'tmp_key-tmp_key-0-0') {
      setone(val)
    } else if (arr.keyPath[0] == 'tmp_key-tmp_key-0-1') {
      settwo(val)
    } else if (arr.keyPath[0] == 'tmp_key-tmp_key-0-2') {
      setthree(val)
    } else if (arr.keyPath[0] == 'tmp_key-tmp_key-0-3') {
      setfour(val)
    }
  }
  const handchange = (e) => {
    setVal(e.target.value)

  }
  return (
    <Layout >
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={(broken) => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="logo" />
        <Menu

          onClick={onClick}
          style={{
            width: 'auto',

            marginTop: '64px'
          }}
          defaultOpenKeys={['sub1']}
          selectedKeys={[current]}
          mode="inline"
        >
          <Menu.SubMenu title="菜单项一">
            <Menu.Item >{one}</Menu.Item>
            <Menu.Item >{two}</Menu.Item>
            <Menu.Item >{three}</Menu.Item>
            <Menu.Item >{four}</Menu.Item>
          </Menu.SubMenu>

          <Menu.SubMenu title="菜单项二">
            <Menu.Item >菜单项2.1</Menu.Item>
            <Menu.Item >菜单项2.2</Menu.Item>
            <Menu.Item >菜单项2.3</Menu.Item>
            <Menu.Item >菜单项2.4</Menu.Item>
          </Menu.SubMenu>

          <Menu.SubMenu title="子菜单">
            <Menu.Item>子菜单项</Menu.Item>
          </Menu.SubMenu>
        </Menu>
      </Sider>
      <Layout >
        <Header
          className="site-layout-sub-header-background"
          style={{
            padding: 0,

          }}
        />
        <Content
          style={{
            margin: '24px 16px 0',
          }}
        >
          <div
            className="site-layout-background"
            style={{
              padding: 24,
              minHeight: 360,

            }}
          >
            <input type="text" value={val} onChange={e => handchange(e)} />
            <button onClick={handclick}>保存</button>
          </div>
        </Content>

      </Layout>
    </Layout>
  );
}

export default App;
